<template>
  <div >
    <p class="title">分享分析</p>
    <div class="form_search">
      <el-form>
        <div class="createTime timePicker">
          <el-input v-model="form.local_time.value"  placeholder="日期"></el-input>
          <el-date-picker   @change="changeTime"   v-model="timePicker" :pickerOptions="pickerOptions"
            type="daterange" range-separator="至"   prefix-icon="0" start-placeholder="开始日期"  
            :value-format="timeFormat" end-placeholder="结束日期" placeholder="选择操作时间"></el-date-picker>
        </div>
        <el-select  v-model="form.site.value" placeholder="站点" clearable  @keyup.enter.native="getData" @focus="getSiteList">
          <el-option v-for="item in siteList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-select  v-model="form.product_model_name.value" placeholder="产品型号名称" clearable  @keyup.enter.native="getData" @focus="getProductModelName" >
          <el-option v-for="item in productModelNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-select  v-model="form.share_way.value" placeholder="分享方式" clearable  @keyup.enter.native="getData" @focus="getProductModelName" >
          <el-option v-for="item in shareWayList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>

      </el-form>
      <div class="form_btn">
        <el-button type="search" icon="iconfont icon-search_normal" @click="getData"></el-button>
        <el-button  icon="iconfont icon-Refresh" @click="resetForm"></el-button>
      </div>
    </div>
    <el-table :data="list" :height="chartsH+'px'" v-loading="loading">
      <el-table-column  label="日期" sortable  prop="local_time"></el-table-column>
      <el-table-column  label="产品型号名称"  prop="product_model_name" width="150" align="left"></el-table-column>
      <el-table-column  label="站点"  prop="site" ></el-table-column>
      <el-table-column  label="分享方式" prop="share_way" ></el-table-column>
      <el-table-column  label="分享次数" width="120" sortable prop="share_count" ></el-table-column>
       <el-table-column label="分享率" sortable prop="share_rate" width="100" align="left">
         <template slot-scope="scope">
           <p>{{scope.row.share_rate}}%</p>
         </template>
       </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { productShare } from '@/api/kanban/index.js'
import { setSearchParams, setPickerOptions, timeFormat, timeTransfor } from '@/utils/index.js'
import { siteSiteList } from '@/api/manage/site.js'
import { productModelNameList } from '@/api/product/productBasic.js'
export default {
  data () {
    return {
       list: [],
      form: {
        local_time:  { value: '', op: 'RANGE' },
        site: { value: '', op: '=' },
        product_model_name: { value: '', op: 'like' },
        share_way: { value: '', op: '=' },
      },
      timePicker: '',
      timeFormat: 'yyyy-MM-dd',
      loading: false,
      siteList: [],
      productModelNameList: [],
      shareWayList: [
        {value: 'Facebook', label: 'Facebook'},
        {value: 'Twitter', label: 'Twitter'},
        {value: 'Email', label: 'Email'},
        {value: 'Link', label: 'Link'},
      ],
      pickerOptions: setPickerOptions()
    }
  },
  props: ['show'],
  watch: {
    show: function(){
      if(this.show) {
        this.getData()
        this.setHeight()
      }
    }
  },
  created (){
    this.setDateCur()
  },
  methods: {
    setHeight () { //图表高度
      this.$nextTick(()=>{ 
        let kanban_product = document.getElementsByClassName("kanban_product")[0]
        let views_left = kanban_product.getElementsByClassName('views')[0].getElementsByClassName('views_right')[0]
        let dom = kanban_product.offsetHeight
        let title = views_left.getElementsByClassName('title')[0].offsetHeight
        let form =  views_left.getElementsByClassName('form_search')[0].offsetHeight
        this.chartsH = dom - title - form - 32 - 34 
      })
    },
    setDateCur() {  // 初始化设置默认日期 当天
      let date = timeFormat(new Date()).split(' ')[0]
      this.timePicker = [date, date]
      let obj = timeTransfor(this.timePicker,  '日')
      this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
      this.start_date = obj.start_date
      this.end_date =  obj.end_date  
    },
    getProductModelName () { //产品名称
      productModelNameList().then(res=>{
        if(res.state ==1){
          this.productModelNameList = res.data
        }
      })
    },
    getSiteList(){ //站点
      siteSiteList().then(res=>{
        this.siteList = res.data
      })
    },
    changeTime (arr) {
      if(arr) {
        this.form.local_time.value = arr[0] + ' - '+ arr[1]
      } else {
        this.form.local_time.value  = null
      }
      this.getData()
    },
      // 重置按钮
    resetForm(){
      for(let item in this.form){
        this.form[item].value =""
      }
      this.setDateCur()
      this.getData()
    },
    getData() {
      this.loading = true
      let params = setSearchParams(this.form)
      productShare(params) .then (res=>{
        if(res.state == 1) {
          let data = res.data
          for(let i = 0; i < data.length; i++){
            data[i].share_count = parseInt(data[i].share_count)
          }
          this.list = data
        }
        this.loading = false
      })
    }
    
  }

}
</script>

<style lang="scss">


</style>